<template>
  <div class="channel">
    <!-- Cell 单元格为列表中的单个展示项 -->
    <van-cell title="我的频道" :border="false">
      <!-- 编辑按钮 -->
      <template v-slot:right-icon>
        <van-button
          plain
          type="warning"
          round
          size="mini"
          v-on:click="delteshow"
          >{{ is ? "完成" : "编辑" }}</van-button
        >
      </template>
      <!-- 编辑按钮 -->
    </van-cell>
    <!-- Cell 单元格为列表中的单个展示项 -->

    <!-- 我的频道宫格 -->
    <van-grid :gutter="10" class="my-grid">
      <van-grid-item
        v-for="(value, index) in newmychannels"
        :key="value.id"
        :text="value.name"
        @click="delchan(value, index)"
      >
        <template v-slot:text>
          <span class="text" :class="{ active: active === index }">{{
            value.name
          }}</span>
        </template>
        <template v-slot:icon>
          <i
            class="iconfont icon-guanbi"
            v-show="is && !fexdchannels.includes(value.id)"
          ></i>
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 我的频道宫格 -->

    <!-- Cell 单元格为列表中的单个展示项 -->
    <van-cell title="推荐频道" :border="false"> </van-cell>
    <!-- Cell 单元格为列表中的单个展示项 -->

    <!-- 推荐频道宫格 -->
    <van-grid :gutter="10" class="tuijian-grid">
      <van-grid-item
        v-for="value in schannels"
        :key="value.id"
        icon="plus"
        :text="value.name"
        @click="addchannels(value)"
      />
    </van-grid>
    <!-- 推荐频道宫格 -->
  </div>
</template>

<script>
import { allchannels, setmychannel, delmychannel } from "@/api/user.js";
export default {
  data() {
    return {
      // 点击控制删除按钮显隐状态
      is: false,
      aallchannels: [], //所有频道
      newmychannels: [], //我的频道
      fexdchannels: [0], //固定频道
    };
  },
  props: {
    //   父组件传过来的我的频道列表
    channels: {
      type: Array,
      required: true,
    },
    active: {
      required: true,
    },
  },
  computed: {
    //推荐频道
    schannels() {
      return this.aallchannels.filter((value) => {
        return !this.newmychannels.find((myvalue) => {
          return myvalue.id === value.id;
        });
      });
    },
  },
  created() {
    this.newmychannels = this.channels;
    this.getallchannels();
  },
  methods: {
    //   获取所有频道
    async getallchannels() {
      try {
        const { data: res } = await allchannels();
        this.aallchannels = res.data.channels;
        console.log(this.aallchannels);
      } catch (err) {
        console.log(err, "获取错误");
      }
    },
    //把推荐频道添加到我的频道
    async addchannels(value) {
      this.newmychannels.push(value);
      // 数据持久化
      if (this.$store.state.usertoken) {
        // 已登录
        try {
          await setmychannel({
            id: value.id,
            seq: this.newmychannels.length,
          });
        } catch (err) {
          console.log(err, "稍后重试");
          this.$toast("保存失败，稍后重试");
        }
      } else {
        // 未登录
        const localchannel = JSON.stringify(this.newmychannels);
        window.localStorage.setItem("TOUTIAO_channels", localchannel);
      }
      // console.log(this);
    },
    // 点击控制删除按钮显隐状态
    delteshow() {
      this.is = !this.is;
    },

    //把我的频道添加到推荐频道  this.fexdchannels.includes(id.id) includes() ，方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。数组也能用！！？
    async delchan(id, index) {
      if (this.is && !this.fexdchannels.includes(id.id)) {
        //  编辑频道
        this.newmychannels = this.newmychannels.filter((value) => {
          return value.id != id.id;
        });
        if (index < this.active) {
          this.$emit("tochannel", index - 1, false);
        }
        // 数据持久化
        if (this.$store.state.usertoken) {
          //  登录
          try {
            await delmychannel(id.id);
            this.$emit('send',this.newmychannels)
          } catch (err) {
            console.log(err, "删除频道失败");
          }
        } else {
          // 未登录
          const localchannel = JSON.stringify(this.newmychannels);
          window.localStorage.setItem("TOUTIAO_channels", localchannel);
        }
      } else {
        // 不编辑频道，跳转
        // 自定义事件，去改变父组件的 active 的值
        this.$emit("tochannel", index, true);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.channel {
  margin-top: 80px;
}

// 推荐频道宫格
/deep/.tuijian-grid {
  .van-grid-item__content {
    flex-direction: row;
    background-color: #f4f5f6;
    .van-icon {
      font-size: 24px;
    }
    .van-grid-item__text {
      margin-top: 0;
      margin-left: 2px;
      // white-space: nowrap;//控制文字不要换行
    }
  }
}

// 我的频道宫格
/deep/.my-grid {
  .van-grid-item__content {
    background-color: #f4f5f6;
    .van-grid-item__icon-wrapper {
      position: absolute;
      right: -3px;
      top: -7px;
      /* height: 0; */
      font-size: 14px;
    }
    .van-grid-item__text {
      margin-left: 7px;
      white-space: nowrap;
      font-size: 28px;
    }
    .van-icon {
      font-size: 24px;
    }
    .text {
      font-size: 28px;
    }
    .active {
      color: red;
    }
  }
}
</style>